import React, { Component } from 'react'
import axios from 'axios'
import betterScroll from 'better-scroll'
export default class Cinema extends Component {
    constructor() {
        super()
        this.state = {
            mytext: "",
            cinemaList: [],
        }
        axios({
            url: "https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=8621223",
            method: "get",
            headers: {
                'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.0", "e": "16588855641625945769246721", "bc": "440300" }',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            this.setState({
                cinemaList: res.data.data.cinemas,
            }, () => {
                // 使用setSate的异步更新，第二个参数
                new betterScroll(".wrapper")
            })
        }).catch(err => {
            console.log(err);
        })
    }
    render() {
        return (
            <div>
                <div>
                    <input type="text" value={this.state.mytext} onChange={
                        (e) => {
                            this.setState({
                                mytext: e.target.value
                            })
                        }
                    } />
                    <div className='wrapper' style={{ height: '500px', overflow: "hidden" }}>
                        <div className='content'>
                            {
                                this.getCinemaList().map(item =>
                                    <dl key={item.cinemaId}>
                                        <dt>{item.name}</dt>
                                        <dd>{item.address}</dd>
                                    </dl>
                                )
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    getCinemaList() {
        return this.state.cinemaList.filter(item => item.name.toUpperCase().includes(this.state.mytext.toUpperCase()) || item.address.toUpperCase().includes(this.state.mytext.toUpperCase()))
    }
    handleChange = (e) => {
        // this.state.cinemaList
    }
}
